<template>
    <div id="main_head" class="flex flex_align_middle">
        <div class="flex top_nav">
            <i
                    :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                    @click="SET_MENU_IF_COLLAPSE(!isCollapse)"
            ></i>
            <span class="sys_name">云创·汇内部管理系统_{{title}}</span>
        </div>
        <div class="flex flex_align_middle">
            <el-dropdown @command="handlerColumn">
        <span class="el-dropdown-link">
          <i class="el-icon-user-solid"></i>
          {{userInfo.userName}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item command="center">个人中心</el-dropdown-item> -->
                    <el-dropdown-item command="edit">修改账号密码</el-dropdown-item>
                    <el-dropdown-item command="loginout" divided>退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- 修改密码 -->
        <pwdModal ref="pwdModal"/>
        <!-- <centerModel ref="centerModal" @edit="getUsers"  /> -->
    </div>
</template>

<script>
    import pwdModal from './pwdModal'
    // import centerModel from './centerModel'
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: 'headMain',
        data() {
            return {
                title: process.env.VUE_APP_PAKE
            }
        },

        components: {
            pwdModal
        },

        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo,
                isCollapse: state => state.state.isCollapse
            })
        },
        methods: {
            ...mapMutations(['SET_MENU_IF_COLLAPSE']),

            handlerColumn(command) {
                switch (command) {
                    // case 'center':
                    //   this.$refs.centerModal.showUserModal = true
                    //   break
                    case 'loginout':
                        this.loginOut()
                        break
                    case 'edit':
                        this.$refs.pwdModal.showPwdModal = true
                        break
                }
            },
            //退出登录
            loginOut() {
                console.log("点击退出登录按钮啦！");
                this.$confirm('确定要退出系统吗？', '退出系统', {
                    confirmButtonText: '退出',
                    cancelButtonText: '取消',
                    closeOnClickModal: 'false',
                    type: 'warning',
                }).then(async () => {
                    let res = (await this.$http.post('/cms/auth/user/logout'))
                    if (res && res.code == '0') {
                        this.$store.commit('clearStorage')
                        this.$router.replace('/login')
                        this.$message.success('退出系统成功')
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    #main_head {
        height: 60px;

        .top_nav {
            align-items: center;
        }

        .sys_name {
            font-size: 18px;
            font-weight: bold;
            margin-left: 20px;
        }

        .el-icon-s-fold,
        .el-icon-s-unfold {
            font-size: 30px;
            cursor: pointer;
        }

        /deep/ .el-dropdown-link {
            cursor: pointer;
            color: #409eff;
        }

        /deep/ .el-icon-arrow-down {
            font-size: 12px;
        }

        .el-icon-user-solid {
            font-size: 18px;
        }
    }
</style>
